<template>
    <div>
        <h2>state:{{ $store.state.count }}----{{ $store.state.hi }}</h2>
        <h2>计算getters{{ $store.getters.num }}</h2>
        <button @click="changeCount">mutations:更改count</button>
        <button @click="changeAct">actions 触发方法</button>
        <h2>{{ $store.state.user.userName }}</h2>
    </div>
</template>

<script>

    export default {
        data(){
            return{

            }
        },
        methods:{
            changeCount(){
                // 非严格模式下 this.$store.commit
                this.$store.commit("CHANGE_COUNT", 20)
            },
            changeAct(){
                //调用action里的方法
                this.$store.dispatch("handleChange", "haha")
                // 调用子模块中action中的方法
                this.$store.dispatch("user/changeName","光头强")
            }

        },
        created(){
            // this.$store.state 将vue中的state数据取出来
            console.log(this.$store.state.count)
            //调用子模块user的变量
            console.log(this.$store.state.user.userName)
        },
    }
</script>

<style lang="scss" scoped>

</style>